import { lazy, Suspense, useState } from "react";
const LazyLoadComponent = lazy(() => import('./LazyLoad'));
import LoadingIndicator from "../../components/LoadingIndicator";
// import NormalComponent from "./Normal";
const NormalComponent = lazy(() => import('./Normal'));


const LazyLoadHome = () => {
  const [showLazy, setShowLazy] = useState(false);
  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">React 动态加载示例</h1>
      <div>
        <button onClick={() => setShowLazy(true)} className="bg-blue-500 hover:bg-blue-700 text-blue-800 py-2 px-4 rounded border-b-blue-700"> 加载重量级组件</button>
      </div>
      <Suspense fallback={<LoadingIndicator />}>
        {showLazy && <LazyLoadComponent />}
      </Suspense>
      <NormalComponent/>
    </div>
  );
};
export default LazyLoadHome;